El siguiente contenedor utiliza dos imágenes de fondo superpuestas:
Este es un ejemplo de cómo se pueden combinar dos imágenes como fondo de un mismo contenedor utilizando CSS moderno. AQUI EL TEXTO SE PONE ENCIMA
El primer fondo se posiciona en la esquina inferior derecha y el segundo se repite desde la esquina superior izquierda.
Imagen de fondo redimensionada:
Este contenedor muestra una imagen de fondo que ha sido redimensionada utilizando la propiedad background-size.
Es útil para ajustar imágenes a dimensiones específicas sin distorsionar el diseño general.
Tamaño original de la imagen de fondo:
En este caso, la imagen de fondo se muestra con su tamaño original, sin aplicar ningún escalado.
Esto puede hacer que se vea muy grande o muy pequeña, dependiendo de la resolución de la imagen.
Este contenedor utiliza tres imágenes de fondo con diferentes posiciones y tamaños aplicados mediante la propiedad background-size.
Es una técnica útil para crear diseños más complejos o decorativos sin necesidad de imágenes adicionales en el HTML.
Este es un ejemplo de cómo usar una imagen de fondo que cubre toda la página. La imagen permanece fija mientras se hace scroll y se adapta al tamaño de la pantalla.
Sin especificar background-origin (por defecto es padding-box):
La imagen de fondo comienza desde el borde del área de relleno (padding).
Este es el comportamiento estándar si no se define background-origin.
Con background-origin: border-box:
La imagen de fondo empieza desde el borde exterior del borde (border).
Esto hace que el fondo se extienda por debajo del borde también.
Con background-origin: content-box:
La imagen de fondo comienza desde el borde del contenido, ignorando padding y border.
Esto puede hacer que la imagen parezca más alejada de los bordes.
Sin especificar background-clip (valor predeterminado: border-box):
El fondo se extiende hasta el borde exterior, incluyendo el borde.
Con background-clip: padding-box:
El fondo solo se extiende hasta el borde del relleno, no cubre el borde.
Con background-clip: content-box:
El fondo solo aparece detrás del contenido, ignorando el padding y el borde.